<!-- src/components/Profile.vue -->
<template>
  <div class="profile-container">
    <!-- 已登录状态 -->
    <div v-if="isLoggedIn" class="user-info">
      <el-avatar :size="64" icon="UserFilled" />
      <h2>{{ currentUser.username }}</h2>
      <h2>{{ currentUser.userphone }}</h2>
      <!-- 订单展示位置 -->
      <orders></orders>
    </div>

    <!-- 未登录状态 -->
    <div v-else class="login-register">
      <el-tabs v-model="activeTab" class="demo-tabs">
        <!-- 登录标签页 -->
        <el-tab-pane label="登录" name="login">
          <el-form :model="loginForm" :rules="rules" label-position="top">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="loginForm.username" placeholder="请输入用户名" />
            </el-form-item>

            <el-form-item label="密码" prop="userpassword">
              <el-input v-model="loginForm.userpassword" type="password" placeholder="请输入密码" show-password />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleLogin" class="submit-btn">
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 注册标签页 -->
        <el-tab-pane label="注册" name="register">
          <el-form :model="registerForm" :rules="rules" label-position="top">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="registerForm.username" placeholder="请输入用户名" />
            </el-form-item>

            <!-- 添加手机号输入框 -->
            <el-form-item label="手机号" prop="userphone">
              <el-input v-model="registerForm.userphone" placeholder="请输入手机号" />
            </el-form-item>

            <el-form-item label="密码" prop="userpassword">
              <el-input v-model="registerForm.userpassword" type="password" placeholder="请输入密码" show-password />
            </el-form-item>

            <el-form-item label="确认密码">
              <el-input v-model="registerForm.confirmPassword" type="password" placeholder="请再次输入密码" show-password />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleRegister" class="submit-btn">
                注册
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 退出登录按钮 -->
    <div v-if="isLoggedIn" class="logout-button">
      <el-button type="danger" @click="handleLogout">退出登录</el-button>
    </div>

    <!-- 客服按钮 -->
    <div v-if="isLoggedIn" class="customer-service-button">
      <el-button type="primary" @click="goToChat">客服</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { isLoggedIn, currentUser, loginForm, registerForm, rules, handleLogin, handleRegister, handleLogout, checkLoginStatus } from '../stores/userStore.js'
// 引入 orders 组件
import Orders from './order.vue'
import { useRouter } from 'vue-router'

const activeTab = ref('login')
const router = useRouter()

// 在组件挂载时检查登录状态
checkLoginStatus()

const goToChat = () => {
  router.push('/chat')
}
</script>

<style scoped>
.profile-container {
  padding: 20px;
  min-height: calc(100vh - 110px);
  background-color: #f5f5f5;
  position: relative;
  /* 添加相对定位 */
}

.login-register {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.user-info {
  text-align: center;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.user-info h2 {
  margin: 15px 0;
  color: #333;
}

.submit-btn {
  width: 100%;
  margin-top: 10px;
}

:deep(.el-tabs__nav) {
  width: 100%;
  display: flex;
}

:deep(.el-tabs__item) {
  flex: 1;
  text-align: center;
}

:deep(.el-form-item__label) {
  font-weight: bold;
}

.logout-button {
  position: absolute;
  /* 添加绝对定位 */
  top: 20px;
  right: 20px;
}

.customer-service-button {
  position: absolute;
  /* 添加绝对定位 */
  top: 20px;
  left: 20px;
}
</style>